
// 根据列数动态渲染瀑布流
function waterFallStream({
    $parent
}) {
    var i = 0; //已显示的图片数
    // img_width = 250; //图片宽度
    var gap = 10; // 每张图片的间隔 为10px
    
    window.onload = function () {
    //   var main = document.getElementById("main");
    //   var items = main.children; //得到子元素集合
    
      waterFall();
    
      //对num张照片进行瀑布流布局
      function waterFall() {
        //得到列数 = 页面可视区域宽度 / 图片的宽度
        var pageWidth = getClient().width;
        var items = $parent.children; //得到子元素集合
        console.log(pageWidth)
        const columns = Math.round(pageWidth / 250)
        const boxWidth = (pageWidth - gap * (columns - 1)) / columns;
        console.log(boxWidth);
        var itemWidth = parseInt(boxWidth) ;
        // var columns = parseInt(pageWidth / (itemWidth + gap));
    
        var arr = []; //用于判断最小高度的数组
        for (var i = 0; i < items.length; i++) {
            // 动态给子元素设置值
          items[i].style.width = itemWidth + "px";
          if (i < columns) {
            // 对第一行图片进行布局
            items[i].style.top = 0;
            items[i].style.left = (itemWidth + gap) * i + "px";
            arr.push(items[i].offsetHeight);
          } else {
            // 对接下来的图片进行定位
            // 首先要找到数组中最小高度和它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
              if (minHeight > arr[j]) {
                minHeight = arr[j];
                index = j;
              }
            }
            // 设置下一行的第一个盒子位置
            // top值就是最小列的高度 + gap
            items[i].style.top = arr[index] + gap + "px";
            // left值就是最小列距离左边的距离
            items[i].style.left = items[index].offsetLeft + "px";
    
            // 修改最小列的高度
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
            arr[index] = arr[index] + items[i].offsetHeight + gap;
          }
        }
      }
      // 页面尺寸改变时实时触发
      window.onresize = function (event) {
        waterFall();
      };
    
        // // 当加载到底部时，从datas读取30张图片生成img并放入div，然后重新布局
        // window.onscroll = function () {
        //   if (
        //     getClient().height + getScrollTop() >=
        //     items[items.length - 1].offsetTop
        //   ) {
        //     var j = 0;
        //     while (j < 30 && i < datas.length) {
        //       var div = document.createElement("div");
        //       div.className = "item";
        //       div.innerHTML = '<img src="' + datas[i] + '" alt="">';
        //       div.firstChild.style.width = img_width;
        //       box.appendChild(div);
        //       i++;
        //       j++;
        //     }
        //     waterFall();
        //   }
        // };
    };
    
    // clientWidth 处理兼容性:获得浏览器可视区域的宽和高
    function getClient() {
        return {
          width: $parent
            ? $parent.clientWidth
            : window.innerWidth ||
              document.documentElement.clientWidth ||
              document.body.clientWidth,
          height: $parent
            ? $parent.clientHeight
            : window.innerHeight ||
              document.documentElement.clientHeight ||
              document.body.clientHeight,
        };
      }
    // scrollTop兼容性处理 :获得浏览器可视区域 距 整个html文档顶部的距离
    function getScrollTop() {
      return window.pageYOffset || document.documentElement.scrollTop;
    }
}

waterFallStream({
    $parent: document.getElementById("main")
})
